<template>
  <view class="container">
    <view class="box flex">
      <image src="/static/common/alipay-icon.png" mode=""></image>
      <view class="name">绑定列表</view>
      <view @click="goBind" class="btn active">未绑定</view>
    </view>
  </view>
</template>

<script setup>
const goBind = () => {
  uni.navigateTo({
    url: '/subPages/bind/bind',
  });
};
</script>

<style lang="scss" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 12px;
  .box {
    height: 72px;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    margin-bottom: 12px;
    image {
      width: 32px;
      height: 32px;
    }
    .name {
      margin: 0 12px;
      flex: 1;
      color: #333;
      font-weight: 500;
      font-size: 14px;
    }
    .btn {
      background: #9999990f;
      border: 1px solid #999999;
      font-weight: 400;
      font-size: 12px;
      border-radius: 16px;
      text-align: center;
      line-height: 28px;
      width: 68px;
      color: #999999;
      &.active {
        border: 1px solid #ff0309;
        background: #ff03090f;
        color: #ff0309;
      }
    }
  }
}
</style>
